<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<style>
			#orderlist {
				margin-top: -1px;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 80px;
				max-width: 86px;
				height: 60px;
			}
			
			.mui-media-body {
				font-size: 16px;
				font-family: "微软雅黑";
				float: left;
			}
			
			.mui-table-view-cell {
				height: 110px;
				position: relative;
				padding-top: 15px;
			}
			
			.mui-ellipsis {
				margin-top: 8px;
			}
			
			.comment_area {
				width: 100px;
				height: 110px;
				position: absolute;
				right: 0;
				top: 0;
			}
			
			.comment_area a {
				float: right;
				margin-right: 8px;
				margin-top: 15px;
				font-size: 13px;
				font-family: "微软雅黑";
			}
			
			.comment_area button {
				float: right;
				margin-right: 16px;
				margin-top: 20px;
				color: #ff512f;
				border: 1px solid #ff512f;
				width: 60px;
				font-size: 13px;
			}
			
			a:active {
				color: #ff512f;
			}
			
			button.comment:active {
				background-color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的订单</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="orderlist">
			</ul>
		</div>
		<!--定义订单列表项的模板-->
		<script type="text/html" id="oList">
			<li class="mui-table-view-cell mui-media" data-id="{{orderNo}}">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="{{OrderImgUrl}}">
					<div class="mui-media-body">
						{{OrderTitle}}{{IsCommented}}{{orderNo}}
						<p class="mui-ellipsis">数量:&nbsp;{{OrderCount}}</p><span></span>
						<p class="mui-ellipsis">总价:&nbsp;￥{{payment}}</p><span></span>
					</div>
					{{if IsCommented}}
					<div class="comment_area">
						<a href="javascript:;">已评价</a>
					</div>
					{{else}}
					<div class="comment_area">
						<a href="javascript:;">待评价</a>
						<button class="comment">评价</button>
					</div>
					{{/if}}
				</a>
			</li>
		</script>
		<script src="js/app.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/template.js"></script>
		<script>
			var myorders={
				oul:document.getElementById("orderlist")
			};
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				// var token= meishiapp.GetUserToken();
				// var url = api_url.orderUrl.format(token);
				// console.log(url);
				plus.nativeUI.showWaiting();
				self.addEventListener("show", function() {
					//WebView的显示事件
					mui.ajax(app.serverUrl+'/order/list.action', {
						type: "GET",
						dataType:"json",
						success: function(res) {
							console.log(JSON.stringify(res.data.list));
							var list = res.data.list;
							//按模板生成需要的html
							var html = "";
							for(var i = 0; i < list.length; i++) {
								html += template("oList", list[i]);
							}
							console.log(html);
							myorders.oul.innerHTML = html;
							//点击列表项
							mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() {
								var txt=this.innerText;
								var oid=this.getAttribute("data-id")
								if(txt.indexOf("待评价")>0){
									openComment(oid);
								}else if(txt.indexOf("已评价")>0){
									showComment(oid);
								}
							});
							plus.nativeUI.closeWaiting();
						},
						error: function(xhr, type, res) {
							console.log(xhr.responseText);
						}
					});
				});

				self.show("pop-in", 200);
			});

            //打开评论窗口
			function openComment(oid) {
				mui.openWindow({
					id: 'feedback.html',
					url: 'feedback.html',
					extras:{
						orderid:oid
					}
				});
			}
			//打开评论详情
			function showComment(oid) {
				mui.openWindow({
					id: 'mycomment.html',
					url: 'mycomment.html',
					extras:{
						orderid:oid
					}
				});
			}
		</script>
	</body>

</html>